<template>
  <div class="trips-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <div class="header-title">
            <el-icon><Location /></el-icon>
            <span>历史行程</span>
          </div>
          <div class="header-actions">
            <el-button type="primary" @click="refreshData">
              <el-icon><Refresh /></el-icon>
              刷新数据
            </el-button>
          </div>
        </div>
      </template>

      <!-- 筛选条件 -->
      <div class="filter-container">
        <el-form :inline="true" :model="filters" class="filter-form">
          <el-form-item label="行程状态">
            <el-select v-model="filters.status" placeholder="行程状态" clearable>
              <el-option label="全部" value="" />
              <el-option label="已完成" value="completed" />
              <el-option label="已取消" value="cancelled" />
              <el-option label="异常" value="abnormal" />
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="filters.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchTrips">搜索</el-button>
            <el-button @click="resetFilters">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 行程列表 -->
      <div class="trips-list">
        <el-table
          :data="tripsList"
          stripe
          border
          style="width: 100%"
          v-loading="loading"
          :row-class-name="getRowClassName"
        >
          <el-table-column type="expand">
            <template #default="props">
              <div class="expanded-content">
                <div class="expanded-info">
                  <div class="info-title">行程详情</div>
                  <div class="info-item">
                    <span class="label">总里程：</span>
                    <span class="value">{{ props.row.mileage }} 公里</span>
                  </div>
                  <div class="info-item">
                    <span class="label">总时长：</span>
                    <span class="value">{{ props.row.duration }} 分钟</span>
                  </div>
                  <div class="info-item">
                    <span class="label">乘客：</span>
                    <span class="value">
                      <el-tag size="small" v-for="passenger in props.row.passengers" :key="passenger.name" style="margin-right: 5px;">
                        {{ passenger.name }}
                      </el-tag>
                    </span>
                  </div>
                </div>
                <div v-if="props.row.abnormalRecords && props.row.abnormalRecords.length > 0" class="expanded-abnormal">
                  <div class="info-title">异常记录</div>
                  <div v-for="(record, index) in props.row.abnormalRecords" :key="index" class="abnormal-record">
                    <el-tag type="danger" size="small">{{ record.time }}</el-tag>
                    <span class="record-desc">{{ record.description }}</span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="行程ID" width="120" />
          <el-table-column prop="startTime" label="开始时间" width="150" />
          <el-table-column prop="endTime" label="结束时间" width="150" />
          <el-table-column prop="startLocation" label="出发地" width="140" />
          <el-table-column prop="endLocation" label="目的地" width="140" />
          <el-table-column prop="passengerCount" label="乘客数" width="80" align="center" />
          <el-table-column prop="amount" label="金额" width="100">
            <template #default="scope">
              ¥{{ scope.row.amount.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100">
            <template #default="scope">
              <el-tag v-if="scope.row.status === 'completed'" type="success">已完成</el-tag>
              <el-tag v-else-if="scope.row.status === 'cancelled'" type="info">已取消</el-tag>
              <el-tag v-else-if="scope.row.status === 'abnormal'" type="danger">异常</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" fixed="right">
            <template #default="scope">
              <el-button 
                size="small" 
                @click="showTripDetail(scope.row)"
              >
                详情
              </el-button>
              <el-button 
                size="small"
                type="primary"
                @click="showTripRoute(scope.row)"
              >
                路线
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>

    <!-- 行程详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="行程详情"
      width="700px"
    >
      <div class="trip-detail" v-if="currentTrip">
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="行程ID">{{ currentTrip.id }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag v-if="currentTrip.status === 'completed'" type="success">已完成</el-tag>
            <el-tag v-else-if="currentTrip.status === 'cancelled'" type="info">已取消</el-tag>
            <el-tag v-else-if="currentTrip.status === 'abnormal'" type="danger">异常</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="开始时间">{{ currentTrip.startTime }}</el-descriptions-item>
          <el-descriptions-item label="结束时间">{{ currentTrip.endTime }}</el-descriptions-item>
          <el-descriptions-item label="出发地">{{ currentTrip.startLocation }}</el-descriptions-item>
          <el-descriptions-item label="目的地">{{ currentTrip.endLocation }}</el-descriptions-item>
          <el-descriptions-item label="总里程">{{ currentTrip.mileage }} 公里</el-descriptions-item>
          <el-descriptions-item label="总时长">{{ currentTrip.duration }} 分钟</el-descriptions-item>
          <el-descriptions-item label="金额">¥{{ currentTrip.amount.toFixed(2) }}</el-descriptions-item>
          <el-descriptions-item label="乘客数">{{ currentTrip.passengerCount }} 人</el-descriptions-item>
        </el-descriptions>
        
        <el-divider>乘客信息</el-divider>
        
        <el-table :data="currentTrip.passengers || []" border style="width: 100%">
          <el-table-column prop="name" label="乘客姓名" />
          <el-table-column prop="phone" label="联系电话" />
          <el-table-column prop="pickup" label="上车点" />
          <el-table-column prop="dropoff" label="下车点" />
        </el-table>
        
        <div v-if="currentTrip.abnormalRecords && currentTrip.abnormalRecords.length > 0">
          <el-divider>异常记录</el-divider>
          <div v-for="(record, index) in currentTrip.abnormalRecords" :key="index" class="abnormal-record">
            <el-tag type="danger">{{ record.time }}</el-tag>
            <span class="record-desc">{{ record.description }}</span>
          </div>
        </div>
      </div>
    </el-dialog>
    
    <!-- 行程路线对话框 -->
    <el-dialog
      v-model="routeDialogVisible"
      title="行程路线"
      width="800px"
    >
      <div class="route-map-container">
        <div class="route-map" ref="routeMapRef"></div>
        <div class="route-info" v-if="currentTrip">
          <div class="route-time">
            <div class="start-time">
              <div class="time-label">开始时间</div>
              <div class="time-value">{{ currentTrip.startTime }}</div>
            </div>
            <div class="divider"></div>
            <div class="end-time">
              <div class="time-label">结束时间</div>
              <div class="time-value">{{ currentTrip.endTime }}</div>
            </div>
          </div>
          <div class="route-locations">
            <div class="location-item start">
              <div class="location-point"></div>
              <div class="location-text">{{ currentTrip.startLocation }}</div>
            </div>
            <div class="location-line"></div>
            <div class="location-item end">
              <div class="location-point"></div>
              <div class="location-text">{{ currentTrip.endLocation }}</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'

// 加载状态
const loading = ref(false)

// 分页参数
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 筛选条件
const filters = reactive({
  status: '',
  dateRange: []
})

// 重置筛选条件
const resetFilters = () => {
  filters.status = ''
  filters.dateRange = []
  searchTrips()
}

// 搜索行程
const searchTrips = () => {
  loading.value = true
  // 模拟API请求
  setTimeout(() => {
    // 这里实际项目中应该调用API
    loading.value = false
    ElMessage.success('搜索完成')
  }, 500)
}

// 刷新数据
const refreshData = () => {
  ElMessage.success('数据已刷新')
  fetchTripsList()
}

// 获取行样式
const getRowClassName = ({ row }) => {
  if (row.status === 'abnormal') {
    return 'abnormal-row'
  }
  return ''
}

// 行程数据
const tripsList = ref([
  {
    id: 'T20230510001',
    startTime: '2023-05-10 08:30',
    endTime: '2023-05-10 09:20',
    startLocation: '校园北门',
    endLocation: '火车站',
    passengerCount: 3,
    mileage: 15.6,
    duration: 50,
    amount: 45.0,
    status: 'completed',
    passengers: [
      { name: '李同学', phone: '13900001111', pickup: '校园北门', dropoff: '火车站' },
      { name: '王同学', phone: '13900002222', pickup: '校园北门', dropoff: '火车站' },
      { name: '赵同学', phone: '13900003333', pickup: '校园北门', dropoff: '火车站' }
    ]
  },
  {
    id: 'T20230510002',
    startTime: '2023-05-10 10:15',
    endTime: '2023-05-10 10:45',
    startLocation: '图书馆',
    endLocation: '华联商场',
    passengerCount: 2,
    mileage: 8.2,
    duration: 30,
    amount: 25.0,
    status: 'completed',
    passengers: [
      { name: '张同学', phone: '13900004444', pickup: '图书馆', dropoff: '华联商场' },
      { name: '陈同学', phone: '13900005555', pickup: '图书馆', dropoff: '华联商场' }
    ]
  },
  {
    id: 'T20230510003',
    startTime: '2023-05-10 14:45',
    endTime: '2023-05-10 15:40',
    startLocation: '学生公寓',
    endLocation: '市中心',
    passengerCount: 4,
    mileage: 20.5,
    duration: 55,
    amount: 65.0,
    status: 'abnormal',
    passengers: [
      { name: '刘同学', phone: '13900006666', pickup: '学生公寓', dropoff: '市中心' },
      { name: '孙同学', phone: '13900007777', pickup: '学生公寓', dropoff: '市中心' },
      { name: '杨同学', phone: '13900008888', pickup: '学生公寓', dropoff: '市中心' },
      { name: '周同学', phone: '13900009999', pickup: '学生公寓', dropoff: '市中心' }
    ],
    abnormalRecords: [
      { time: '2023-05-10 15:10', description: '车速超过限制(65km/h)' },
      { time: '2023-05-10 15:25', description: '偏离预定路线' }
    ]
  },
  {
    id: 'T20230511001',
    startTime: '2023-05-11 09:00',
    endTime: '2023-05-11 09:35',
    startLocation: '校园东门',
    endLocation: '科技园',
    passengerCount: 2,
    mileage: 12.8,
    duration: 35,
    amount: 35.0,
    status: 'cancelled',
    passengers: [
      { name: '吴同学', phone: '13900010000', pickup: '校园东门', dropoff: '科技园' },
      { name: '郑同学', phone: '13900011111', pickup: '校园东门', dropoff: '科技园' }
    ]
  }
])

// 计算总数
total.value = tripsList.value.length

// 获取行程列表数据
const fetchTripsList = () => {
  loading.value = true
  // 模拟API请求
  setTimeout(() => {
    // 这里实际项目中应该调用API
    loading.value = false
  }, 500)
}

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val
  fetchTripsList()
}

// 处理当前页变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchTripsList()
}

// 行程详情
const detailDialogVisible = ref(false)
const currentTrip = ref(null)

// 显示行程详情
const showTripDetail = (trip) => {
  currentTrip.value = trip
  detailDialogVisible.value = true
}

// 行程路线
const routeDialogVisible = ref(false)
const routeMapRef = ref(null)

// 显示行程路线
const showTripRoute = (trip) => {
  currentTrip.value = trip
  routeDialogVisible.value = true
  
  // 等待DOM更新后初始化地图
  nextTick(() => {
    if (routeMapRef.value) {
      // 这里应该集成高德地图API显示轨迹
      // 因为需要引入外部API，这里只做占位处理
      routeMapRef.value.innerHTML = `
        <div style="height: 100%; display: flex; justify-content: center; align-items: center; background-color: #f5f7fa; color: #909399;">
          <div>
            <h3>行程路线: ${trip.id}</h3>
            <p>起点: ${trip.startLocation} → 终点: ${trip.endLocation}</p>
            <p>此处将显示行程路线（需集成高德地图API）</p>
          </div>
        </div>
      `
    }
  })
}

// 组件挂载后执行
onMounted(() => {
  fetchTripsList()
})
</script>

<style scoped>
.trips-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.header-title .el-icon {
  margin-right: 8px;
  font-size: 20px;
}

.filter-container {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
}

.trips-list {
  margin-top: 20px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.expanded-content {
  padding: 15px 20px;
}

.expanded-info, .expanded-abnormal {
  margin-bottom: 15px;
}

.info-title {
  font-weight: bold;
  margin-bottom: 10px;
  color: #303133;
}

.info-item {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

.label {
  font-weight: bold;
  width: 80px;
  color: #606266;
}

.value {
  color: #303133;
}

.abnormal-record {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.record-desc {
  color: #606266;
}

.abnormal-row {
  background-color: #fef0f0;
}

.trip-detail {
  max-height: 60vh;
  overflow-y: auto;
}

.route-map-container {
  display: flex;
  flex-direction: column;
}

.route-map {
  height: 400px;
  background-color: #f5f7fa;
  margin-bottom: 20px;
  border-radius: 4px;
}

.route-info {
  display: flex;
  justify-content: space-between;
}

.route-time {
  display: flex;
  align-items: center;
  gap: 15px;
}

.time-label {
  font-size: 12px;
  color: #909399;
}

.time-value {
  font-weight: bold;
  color: #303133;
}

.divider {
  width: 20px;
  height: 1px;
  background-color: #dcdfe6;
}

.route-locations {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-left: 20px;
}

.location-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.location-point {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 10px;
}

.location-item.start .location-point {
  background-color: #67C23A;
}

.location-item.end .location-point {
  background-color: #F56C6C;
}

.location-line {
  width: 1px;
  height: 30px;
  background-color: #dcdfe6;
  margin-left: 5px;
  margin-bottom: 5px;
}

.location-text {
  font-size: 14px;
  color: #303133;
}
</style> 